<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input{
				width:100px;
			}
			.hidden{
				display: none;
			}
		</style>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			var images=[];
			$(function(){
				$.ajax(
				{
					url:"data.json",
					type:"get",
					dataType:"json",
					async:false,
					success:function(data){						
					images=data;
					console.log(images)
					}
				}
			)
			display();
		})
		function display(){
			$("tbody").html("")
			for (let i = 0; i < images.length; i++) {
				let tr=$("<tr></tr>")
				let td1 =newTD(images[i].id)
				let td2 =newTD(images[i].name)
				let td3 =newTD(images[i].dynasty)
				let td4 =newTD(images[i].author)
				tr.append(td1)
				tr.append(td2)
				tr.append(td3)
				tr.append(td4)
				let td=$("<td></td>")
				let btn1=$("<button class='edit' onclick='edit()'>编辑</button>")
				let btn2=$("<button class='del' onclick='del()'>删除</button>")
				let btn3=$("<button class='save' onclick='save()'>保存</button>")
				let btn4=$("<button class='cancel' onclick='cancel()'>取消</button>")
				td.append(btn1)
				td.append(btn2)
				td.append(btn3)
				td.append(btn4)
				tr.append(td)
				$("tbody").append(tr)
			}
			
			$("input").attr("disabled","disabled")
			$(".save").addClass("hidden")
			$(".cancel").addClass("hidden")
			$(".add").removeClass("hidden")
		}
		function newTD(v){
			let td=$("<td></td>")
			let input=$("<input type='text'/>")
			input.attr("value",v)
			td.append(input)
			return td;
		}
		function add(){
			$(".add").addClass("hidden")
			let tr=$("<tr></tr>")
			let td1 =newTD("")
			let td2 =newTD("")
			let td3 =newTD("")
			let td4 =newTD("")
			tr.append(td1)
			tr.append(td2)
			tr.append(td3)
			tr.append(td4)
			let td=$("<td></td>")
			let btn3=$("<button class='save' onclick='save()'>保存</button>")
			let btn4=$("<button class='cancel' onclick='cancel()'>取消</button>")
			td.append(btn3)
			td.append(btn4)
			tr.append(td)
			$("tbody").append(tr)
		}
		function cancel(){
			if(confirm("是否要取消？")){
				display()
			}
		}
		function save(){
			var index=$(".save").index(event.target)
			var t1=$("tbody>tr:eq("+index+") input").eq(0).val()
			var t2=$("tbody>tr:eq("+index+") input").eq(1).val()
			var t3=$("tbody>tr:eq("+index+") input").eq(2).val()
			var t4=$("tbody>tr:eq("+index+") input").eq(3).val()
			if(t1==""||t2==""||t3==""||t4==""){
				alert("输入的数据不完整")
				return false;
			}else if(confirm("是否保存？")){
				let image={}
				image.id=t1
				image.name =t2;
				image.dynasty=t3;
				image.author=t4
				images[index]=image
				display()
			}
		}
		function edit(){
			var index=$(".edit").index(event.target)
			$(".edit").eq(index).addClass("hidden")
			$(".del").eq(index).addClass("hidden")
			$(".save").eq(index).removeClass("hidden")
			$(".cancel").eq(index).removeClass("hidden")
			$("tbody>tr:eq("+index+") input").removeAttr("disabled")
		}
		function del(){
			if(confirm("是否要删除数据？")){
				var index=$(".del").index(event.target)
				images.splice(index,1)
				display();
			}
		}
		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>朝代</th>
					<th>作者</th>
					<th>操作</th>
				</tr>
			</thead>
				<tbody></tbody>
				<tfoot>
					<tr style="text-align: center;">
						<td colspan="5"><button class="add" onclick="add()">增加</button></td>
					</tr>
				</tfoot>
		</table>
		
	</body>
</html>
